<template>
  <div class="detail">
    <div class="product">
        <div class="back" @click="back">
        《返回商城
        </div>
        <div class="product_left">
            <div class="product_left_img">
                <img :src="product.src" alt="">
            </div>
            <div class="product_left_collect" style="font-size:1.8vw">
                <i class="el-icon-star-off" style="margin-right:5px;"></i>收藏商品
            </div>
        </div>
        <div class="product_right">
            <div class="right_name">
                {{ product.name }}~~~
                {{ product.detail }}
            </div>
            <div class="right_price">
                <div class="column_name">
                    价格
                </div>
                <div style="display:flex;align-items: center;font-size: 2vw;color:red;">￥{{ product.price }}</div>
            </div>
            <div class="right_send">
                <div class="column_name">
                    配送
                </div>
                <div style="display:flex;align-items: center">大冶到武汉</div>
            </div>
            <div class="right_size">
                <div class="column_name">
                    尺寸
                </div>
                <div style="display:flex;align-items: center">暂无</div>
            </div>
            <div class="right_color">
                <div class="column_name">
                    颜色分类
                </div>
                <div style="display:flex;align-items: center">暂无</div>
            </div>
            <div class="right_number">
                <div class="column_name">
                    数量
                </div>
                <div style="display:flex;align-items: center">
                    <button style="width:3.25vw;height:3.25vw;font-size: 2vw;text-align: center;" @click="decrease">-</button>
                    <div style="width:70px;height:38px;font-size:2.5vw;line-height: 38px;text-align: center;background-color: white">{{ number }}</div>
                    <button style="width:3.25vw;height:3.25vw;font-size: 2vw" @click="add">+</button>
                </div>
            </div>
            <div class="right_buy">
                <div class="ljgm">
                    <button >立即购买</button>
                </div>
                <div class="jrgwc">
                    <button @click="addToCart">
                        <i class="el-icon-shopping-cart-2" style="margin-right:5px" ></i>
                        加入购物车
                    </button>
                </div>
            </div>
        </div>

    </div>
    
  </div>
</template>

<script>

export default {
    data(){
        return{
            product:{},
            number:1
        }
    },
    methods:{
        fun(){
            this.product=JSON.parse(localStorage.getItem('product'))
            if(!this.product){
                this.$router.push('/mall')
                this.$message.warning('暂无信息，返回首页！')
            }
        },
        back(){
            this.$router.go(-1)
        },

        //#region (产品的加减)
        decrease(){
            this.number--
            if(this.number<1){
                this.$message.warning("最少只能购买一件~")
                this.number=1
            }
        },
        add(){
            this.number++
        },
        //#endregion
    
        addToCart(){
            let product={}
            product.goodsId=this.product.id
            product.name=this.product.name
            product.src=this.product.src
            product.detail=this.product.goodsDetail
            product.price=this.product.price
            product.number=this.number
            product.checked=false
            console.log('product:',product);
            let cart=localStorage.getItem('cart') ? JSON.parse(localStorage.getItem('cart')) : []
            cart.unshift(product)
            localStorage.setItem('cart',JSON.stringify(cart))
            this.$message.success('成功加入购物车~~')
        }
    },
    mounted(){
        this.fun()
    }

}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.detail{
    margin-top: 4vw;
    width: 100%;
    display: flex;
    justify-content: center;
}
.back{
    cursor: pointer;
    left: 2vw;
    top: -3.3vw;
    width: 200px;
    height: 50px;
    font-size: 2.2vw;
    color: red;
    position: absolute;
}
.product{
    position: relative;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    width: 80vw;
    height: 35.81vw;
    /* background-color: pink; */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.product_left{
    width: 34.55%;
    height:35.81vw;
    /* background-color: skyblue; */
    display: flex;
    flex-direction: column;
}
.product_left_img{
    width: 100%;
}
.product_left_img img{
    width: 100%;
}
.product_left_collect{
    flex: 1;
    /* background-color: red; */
    font-size: 24px;
    display: flex;
    background-color: #f0f9f4;
    align-items: center;
}
/* 商品详情页右侧 */
.product_right{
    background-color: white;
    margin-left: -40px;
    width: 56%;
    height: 35.81vw;
    /* background-color: yellow; */
    display: flex;
    flex-direction: column;
}
.right_name{
    width: 100%;
    height: 3.75vw;
    font-size: 1.8vw;
    /* background-color: red; */
}
.right_price{
    width: 100%;
    height: 5.35vw;
    background-color: rgb(255,242,232);
    display: flex;
}
.right_send{
    width: 100%;
    height: 5.35vw;
    display: flex;
    background-color: #fff9f5;
    border-bottom: 1px solid #999;
}
.right_size{
    width: 100%;
    height: 4.10vw;
    display: flex;
}
.right_color{
    width: 100%;
    height: 4.90vw;
    display: flex;
}
.right_number{
    width: 100%;
    height: 5.95vw;
    display: flex;
}
.right_buy{
    width: 100%;
    height: 6.8vw;
    display: flex;
    align-items: center;
}
.ljgm button{
    margin-left: 3px;
    margin-top: 20px;
    color:orangered;
    background-color: #ffe4d0;
    width: 13.03vw;
    height: 4.25vw;
    font-size: 1.8vw;
    outline: none;
    border-color: #F0CAB6;
}
.jrgwc button{
    margin-left: 10px;
    margin-top: 20px;
    background-color: #ff4400;
    color:white;
    font-size: 1.8vw;
    outline: none;
    width: 14.66vw;
    height: 4.25vw;
    /* border-color: #F0CAB6; */
}
.column_name{
    width: 80px;
    height: 100%;
    display: flex;
    align-items: center;
}
</style>